<template>
  <div>
    <!-- 文章列表 -->
    <div class="normalpost" v-if="postlist.type == 1">
      <div class="header">
        <span @click="$router.back(-1)" class="iconfont iconjiantou2"></span>
        <span class="iconfont iconnew"></span>
        <div
          class="btnFollow"
          @click="handleFollow"
          :class="{ unFollow: !postlist.has_follow }"
        >
          {{ postlist.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="mianContent">
        <div class="title">{{ postlist.title }}</div>
        <div class="info">{{ postlist.user.nickname }} 2019-10-10</div>
        <div class="content" v-html="postlist.content"></div>
      </div>
    </div>
    <!-- 视频列表 -->
    <div class="videopost" v-if="postlist.type == 2">
      <video :src="postlist.content" controls poster="@/assets/4.jpg"></video>
      <div class="info">
        <img src="@/assets/1.jpg" alt="" class="avatar" />
        <div class="name">{{ postlist.user.nickname }}</div>
        <div
          class="btnFollow"
          @click="handleFollow"
          :class="{ unFollow: !postlist.has_follow }"
        >
          {{ postlist.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postlist.title }}顶顶顶</div>
    </div>
    <!-- 按钮 -->
    <div class="btns">
      <div
        class="btn dianzan"
        @click="handlelike"
        :class="{ haslike: postlist.has_like }"
      >
        <span class="iconfont icondianzan"></span>
        {{ postlist.like_length }}
      </div>
      <div class="btn weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>
    <!-- 帖子 -->
    <div class="postcomment">
      <!-- 帖子顶部 -->
      <div class="commentTop">
        <div class="th">精彩跟帖</div>
        <!-- 有评论的时候渲染 -->
        <div v-if="postlist.comment_length > 0">
          <Main
            :commentdata="comment"
            v-for="(comment, index) in commentlist"
            :key="index"
          />
        </div>
        <!-- 没有评论就显示无跟帖 -->
        <div v-else class="tb">暂无跟帖,抢占沙发</div>
      </div>
      <!-- 精彩跟帖 -->
      <div class="fz">
        <div
          @click="$router.push('/comment/' + $route.params.id)"
          class="comment"
        >
          更多热帖
        </div>
      </div>
      <!-- 评论底部 -->
      <div class="commentBottom">
        <div class="deactive" v-if="!showfocus">
          <input type="text" class="reviewLeft" placeholder="写跟贴"  @focus="focup"/>
          <div class="reviewRight">
            <div class="iconfont iconpinglun-">
              <div class="pinglun">{{ postlist.comment_length }}</div>
            </div>
            <span
              class="iconfont iconshoucang"
              @click="poststar"
              :class="{ stars: postlist.has_star }"
            ></span>
            <span class="iconfont iconfenxiang"></span>
          </div>
        </div>
        <div class="active" v-if="showfocus">
          <textarea name="" id="actives" cols="30" rows="3" ref="foc" @blur="blurup"></textarea>
          <button>发送</button>
        </div>
      </div>
      <div class="zanwei"></div>
    </div>
  </div>
</template>

<script>
import Main from "../components/Comment/Main";
export default {
  //    mounted(){
  //        console.log(this.$route.params.id);
  //    }
  components: {
    Main,
  },
  data() {
    return {
      postlist: [],
      commentlist: [],
      showfocus:false
    };
  },
  created() {
    this.$axios({
      url: "post_comment/" + this.$route.params.id,
    }).then((res) => {
      console.log(res.data.data);
      // 只要显示三条评论多的就阶段
      if (res.data.data.length > 3) {
        res.data.data.length = 3;
      }
      this.commentlist = res.data.data;
    });
    this.loadPage();
  },
  methods: {
    focup(){
      this.showfocus=true
    //  setTimeout(() => {
    //    this.$refs.foc.focus()
    //  }, 100);
    // 1可以比较粗暴的直接用一个setTimeout来完成
    // 2我们要等到textare渲染出来再聚焦,但是不知道什么时候渲染完,$nexTick可以在下次渲染完再触发
      this.$nextTick(()=>{
      this.$refs.foc.focus()
    })

    },
    blurup(){
      this.showfocus=false
    },
    loadPage() {
      this.$axios({
        url: "/post/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data.data);
        this.postlist = res.data.data;
      });
    },
    //取消
    handleFollow() {
      if (this.postlist.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postlist.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postlist.has_follow = false;
        });
      } else {
        //关注
        this.$axios({
          url: "/user_follows/" + this.postlist.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postlist.has_follow = true;
        });
      }
    },
    // 点赞
    handlelike() {
      this.$axios({
        url: "/post_like/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data);
        if (res.data.message === "点赞成功") {
          this.postlist.like_length++;
          this.postlist.has_like = true;
          this.$toast.success("点赞成功");
        } else {
          this.postlist.like_length--;
          this.postlist.has_like = false;
          this.$toast("取消成功");
        }
      });
    },
    //收藏
    poststar() {
      this.$axios({
        url: "/post_star/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data);
        if (res.data === "收藏成功") {
          this.$toast(res.data);
        } else {
          this.$toast(res.data);
        }
        this.loadPage();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.normalpost {
  .header {
    padding: 0 20/360 * 100vw;
    height: 40/360 * 100vw;
    display: flex;
    align-items: center;
    .iconjiantou2 {
      font-size: 15/360 * 100vw;
    }
    .iconnew {
      font-size: 50/360 * 100vw;
      flex: 1;
    }
    .btnFollow {
      font-size: 12/360 * 100vw;
      font-weight: 700;
      color: gray;
      border: 1px solid black;
      height: 24/360 * 100vw;
      width: 60/360 * 100vw;
      text-align: center;
      border-radius: 12/360 * 100vw;
      line-height: 24/360 * 100vw;
      &.unFollow {
        color: #fff;
        background-color: red;
        border-color: red;
      }
    }
  }
  .mianContent {
    padding: 5/360 * 100vw 20/360 * 100vw;
    .title {
      font-size: 17/360 * 100vw;
      font-weight: 700;
    }
    .info {
      color: #c8c8c8;
      padding: 5/360 * 100vw 0;
    }
    .content {
      /deep/img {
        max-width: 100%;
      }
    }
  }
}
.videopost {
  video {
    width: 100%;
  }
  .info {
    display: flex;
    align-items: center;
    padding: 20/360 * 100vw;
    .avatar {
      height: 30/360 * 100vw;
      width: 30/360 * 100vw;
      object-fit: cover;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      padding-left: 10/360 * 100vw;
      font-size: 13/360 * 100vw;
      color: #cccccc;
    }
    .btnFollow {
      height: 26/360 * 100vw;
      width: 70/360 * 100vw;
      line-height: 28/360 * 100vw;
      text-align: center;
      font-size: 13/360 * 100vw;
      border-radius: 15/360 * 100vw;
      border: 1px solid black;
      &.unFollow {
        color: #fff;
        background-color: red;
        border-color: red;
      }
    }
  }
  .title {
    padding: 0 20/360 * 100vw;
    font-size: 18/360 * 100vw;
  }
}
.btns {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 60/360 * 100vw;
  .btn {
    width: 80/360 * 100vw;
    height: 30/360 * 100vw;
    text-align: center;
    line-height: 30/360 * 100vw;
    border-radius: 15/360 * 100vw;
    border: 1px solid black;
    .iconweixin {
      color: #00c800;
    }
    &.haslike {
      color: red;
      border-color: red;
    }
  }
}
.postcomment {
  border-top: 5/360 * 100vw solid #e4e4e4;
  .commentTop {
    box-sizing: border-box;
    width: 100%;
    .th {
      text-align: center;
      padding-top: 20/360 * 100vw;
      font-size: 18/360 * 100vw;
    }
    .tb {
      color: #b8b8b8;
      padding: 20/360 * 100vw 0;
      text-align: center;
    }
  }

  .commentBottom {
    position: fixed;
      left: 0;
      bottom: 0;
    .deactive {
      height: 50/360 * 100vw;
      display: flex;
      padding: 0 20/360 * 100vw;
      justify-content: space-around;
      align-items: center;
      .reviewLeft {
        height: 30/360 * 100vw;
        width: 155/360 * 100vw;
        background-color: #d7d7d7;
        border-radius: 15/360 * 100vw;
        padding-left: 20/360 * 100vw;
        line-height: 30/360 * 100vw;
      }
      .reviewRight {
        width: 120/360 * 100vw;
        height: 30/360 * 100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 15/360 * 100vw;
        margin-left: 20/360 * 100vw;
        span {
          font-size: 20/360 * 100vw;
          cursor: pointer;
          &.stars {
            border-color: red;
            color: red;
          }
        }
        .iconpinglun- {
          position: relative;
          display: inline-block;
          font-size: 20/360 * 100vw;
          cursor: pointer;
          .pinglun {
            font-size: 11/360 * 100vw;
            position: absolute;
            top: -5/360 * 100vw;
            left: 3/360 * 100vw;
            width: 30/360 * 100vw;
            height: 16/360 * 100vw;
            text-align: center;
            line-height: 16/360 * 100vw;
            border-radius: 8/360 * 100vw;
            color: #fff;
            background-color: red;
          }
        }
      }
    }
    .active {
      display: flex;
      align-items: flex-end;
      padding: 10/360 * 100vw;
      #actives {
        height: 80/360*100vw;
        border-radius: 5/360 * 100vw;
        outline: none;
        border: none;
        background-color: #e4e4e4;
        box-sizing: border-box;
        resize: none;
      }
      button {
        margin-left: 10/360*100vw;
        padding: 0 10/360 * 100vw;
        font-size: 10/360 * 100vw;
        font-weight: 700;
        height: 20/360 * 100vw;
        line-height: 20/360 * 100vw;
        text-align: center;
        border-radius: 10/360*100vw;
        border-color:transparent ;
        background-color: #fc1944;
        color:#fff;
      }
    }
  }
  .fz {
    display: flex;
    justify-content: center;
    padding: 20/360 * 100vw 0 60/360*100vw 0;
    .comment {
      height: 30/360 * 100vw;
      border: 1px solid black;
      border-radius: 15/360 * 100vw;
      width: 80/360 * 100vw;
      text-align: center;
      line-height: 30/360 * 100vw;
    }
  }
  .zanwei {
    height: 50/360 * 100vw;
  }
}
</style>